import { Button, Card, Col, Badge, Form, Select, message } from "antd"
import Modal from "antd/lib/modal/Modal"
import React, { useEffect, useState } from "react";
import { getUserGroupsList,handleMessage } from "../vo/request";
import { userGroupData,messageData } from "../vo/vo";

const { Option } = Select;

type invitiedProps = {
    data: {
        username: string,
        projectName: string,
        messageId: number
    },
    setMessages: React.Dispatch<React.SetStateAction<messageData[]>>,
    index: number,
    new?: boolean
}

export function Invitied(props: invitiedProps) {
    const newTitle = (
        <div style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between"
        }}>
            <span>项目邀请</span>
            <Badge offset={[-10, 0]} dot />
        </div>
    )
    return (
        <Card title={props.new ? newTitle : "项目邀请"}>
            <span>{props.data.username}邀请您加入项目{props.data.projectName},是否同意加入</span>
            <SelectGroup index={props.index} setMessages={props.setMessages} data={props.data} formName={"message-" + props.data.messageId}/>
        </Card>
    )
}

function setGroupOption(data: userGroupData[]): React.ReactElement[] {
    return data.map((item) => {
        return <Option value={item.groupId} key={item.groupId}>{item.groupName}</Option>
    });
}

function SelectGroup(props: { formName: string, data:any, index: number, setMessages: React.Dispatch<React.SetStateAction<messageData[]>> }) {
    const [groupData, setGroupData] = useState([] as userGroupData[])
    const [isModalVisible, setModalVisible] = useState(false);
    const [selectLoading, setSelectLoading] = useState(false);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        (async () => {
            setSelectLoading(true);
            let res = await getUserGroupsList();
            setSelectLoading(false);
            if (!res.code) {
                setGroupData(res.data);
            }
        })()
    }, []);

    const onClose = () => {
        setModalVisible(false);
    };
    const onOpen = () => {
        setModalVisible(true);
    };
    const onFinish = async (value: any) => {
        console.log(value);
        setLoading(true);
        let res = await handleMessage({
            messageId: props.data.messageId,
            status: 1,
            groupId: value.group
        });
        setLoading(false);
        message.success("操作成功");
        setModalVisible(false);
        props.setMessages((messages) => {
            messages.splice(props.index, 1);
            return messages.slice(0);
        });
        console.log(res);

    }

    return (
        <>
            <Col style={{ display: "flex", justifyContent: "flex-end" }}><Button onClick={onOpen} type="link" size="small">同意</Button></Col>
            <Modal
                visible={isModalVisible}
                title="选择分组"
                onCancel={onClose}
                footer={(
                    <>
                        <Button onClick={onClose}>取消</Button>
                        <Button loading={loading} htmlType="submit" type="primary" form={props.formName}>确定</Button>
                    </>
                )}
            >
                <Form
                    name={props.formName}
                    onFinish={onFinish}
                >
                    <Form.Item
                        label="选择分组"
                        rules={[{ required: true, message: "必须选择一个分组" }]}
                        name="group"
                    >
                        <Select
                            placeholder="选择分组" 
                            loading={selectLoading}
                        >
                            {setGroupOption(groupData)}
                        </Select>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}